<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频水印演示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #111;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .player-container {
            position: relative;
            width: 90vw;
            max-width: 800px;
            aspect-ratio: 16/9;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
        }
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            outline: none;
        }
        .watermark {
            position: absolute;
            pointer-events: none;
            z-index: 100;
            color: rgba(255,255,255,0.6);
            font-size: 24px;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
            opacity: 0.7;
            transform: rotate(-20deg);
            user-select: none;
        }
        .controls {
            display: flex;
            gap: 15px;
            margin: 24px 0 0 0;
            width: 90vw;
            max-width: 800px;
        }
        button {
            flex: 1;
            min-width: 120px;
            padding: 12px 20px;
            background: #222;
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        button:hover {
            background: #444;
        }
        video::-webkit-media-controls-fullscreen-button {
            display: none !important;
        }
        video::-webkit-media-controls-enclosure {
            overflow: hidden;
        }
        @media (max-width: 600px) {
            .player-container, .controls {
                width: 100vw;
                max-width: 100vw;
            }
        }
    </style>
</head>
<body>
    <div class="player-container">
        <video id="videoPlayer" controls>
            <source src="https://study-platform-1258739349.cos.ap-guangzhou.myqcloud.com/uploads/videos/2025/07/18/8688889c-9a6e-4d0a-be8d-bcae040068ee.mp4?q-sign-algorithm=sha1&q-ak=AKIDnrlXAdy99ya3LTPCnCNL4cx40kJix10t&q-sign-time=1752855006;1752862206&q-key-time=1752855006;1752862206&q-header-list=host&q-url-param-list=&q-signature=2d1c3b194b0a25eac783d5a7045e08120e4fbac8" type="video/mp4">
            您的浏览器不支持HTML5视频。
        </video>
        <!-- 水印由JavaScript动态生成 -->
    </div>
    <div class="controls">
        <button id="toggleFullscreen">
            <i class="fas fa-expand"></i> 全屏模式
        </button>
        <button id="toggleWatermark">
            <i class="fas fa-water"></i> 切换水印
        </button>
        <button id="reloadDemo">
            <i class="fas fa-sync"></i> 重置
        </button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videoPlayer = document.getElementById('videoPlayer');
            const container = document.querySelector('.player-container');
            const toggleFullscreenBtn = document.getElementById('toggleFullscreen');
            const toggleWatermarkBtn = document.getElementById('toggleWatermark');
            const reloadBtn = document.getElementById('reloadDemo');
            
            let watermarkVisible = true;
            let watermarkElements = [];
            
            // 初始化水印
            createWatermark();
            
            // 创建最简单的水印
            function createWatermark() {
                // 清除现有水印
                watermarkElements.forEach(el => el.remove());
                watermarkElements = [];
                if (!watermarkVisible) return;
                // 固定样式和内容
                const text = '示例水印';
                const color = '#ffffff';
                const opacity = 0.6;
                const size = '24px';
                const angle = '-20deg';
                for (let i = 0; i < 40; i++) {
                    const watermark = document.createElement('div');
                    watermark.className = 'watermark';
                    watermark.textContent = text;
                    watermark.style.color = color;
                    watermark.style.opacity = opacity;
                    watermark.style.fontSize = size;
                    watermark.style.transform = `rotate(${angle})`;
                    // 随机位置
                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    watermark.style.left = left + '%';
                    watermark.style.top = top + '%';
                    container.appendChild(watermark);
                    watermarkElements.push(watermark);
                }
            }
            
            // 切换全屏
            function toggleFullscreen() {
                if (!document.fullscreenElement) {
                    if (container.requestFullscreen) {
                        container.requestFullscreen();
                    } else if (container.mozRequestFullScreen) { /* Firefox */
                        container.mozRequestFullScreen();
                    } else if (container.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                        container.webkitRequestFullscreen();
                    } else if (container.msRequestFullscreen) { /* IE/Edge */
                        container.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                }
            }
            // 切换水印可见性
            function toggleWatermark() {
                watermarkVisible = !watermarkVisible;
                createWatermark();
                toggleWatermarkBtn.innerHTML = watermarkVisible ? 
                    '<i class="fas fa-eye-slash"></i> 隐藏水印' : 
                    '<i class="fas fa-eye"></i> 显示水印';
            }
            // 重置演示
            function reloadDemo() {
                watermarkVisible = true;
                createWatermark();
                toggleWatermarkBtn.innerHTML = '<i class="fas fa-eye-slash"></i> 隐藏水印';
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                }
            }
            // 事件监听
            toggleFullscreenBtn.addEventListener('click', toggleFullscreen);
            toggleWatermarkBtn.addEventListener('click', toggleWatermark);
            reloadBtn.addEventListener('click', reloadDemo);
            // 监听 video 进入全屏，强制切换为容器全屏（兼容各浏览器）
            function forceContainerFullscreen(e) {
                // webkit
                if (document.webkitFullscreenElement === videoPlayer) {
                    document.webkitExitFullscreen();
                    container.webkitRequestFullscreen();
                }
                // 标准
                if (document.fullscreenElement === videoPlayer) {
                    document.exitFullscreen();
                    container.requestFullscreen();
                }
                // firefox
                if (document.mozFullScreenElement === videoPlayer) {
                    document.mozCancelFullScreen();
                    container.mozRequestFullScreen();
                }
                // ms
                if (document.msFullscreenElement === videoPlayer) {
                    document.msExitFullscreen();
                    container.msRequestFullscreen();
                }
            }
            videoPlayer.addEventListener('webkitfullscreenchange', forceContainerFullscreen);
            videoPlayer.addEventListener('fullscreenchange', forceContainerFullscreen);
            videoPlayer.addEventListener('mozfullscreenchange', forceContainerFullscreen);
            videoPlayer.addEventListener('MSFullscreenChange', forceContainerFullscreen);
        });
    </script>
</body>
</html>